

<template>

  <el-card class="mainContainer" shadow="never">

    <div ref="searchRef">
      <slot name="searchForm"></slot>
    </div>

    <el-row :gutter="10" class="margin-bottom-18"
            style="margin-left: 0;margin-right: 0"
            type="flex" justify="space-between">
      <el-col :span="1.5" style="padding: 0">
        <slot name="batchButton"></slot>
      </el-col>

      <el-col :span="1.5" style="padding: 0">
        <slot name="rightToolbar"></slot>
      </el-col>
    </el-row>

    <slot name="table"></slot>

    <el-row :gutter="10" class="margin-top-18"
            style="margin-left: 0;margin-right: 0"
            type="flex" justify="space-between">
      <el-col :span="1.5">
      </el-col>
      <slot name="pagination"></slot>
    </el-row>
  </el-card>


</template>

<script setup>


import {nextTick, onMounted, onUnmounted, ref} from "vue";

const searchRef = ref(null)
const max_table_height = ref("calc(100vh - 350px)")

const update_max_table_height = ()=>{
  max_table_height.value = "calc(100vh - 250px - " + searchRef.value.clientHeight + "px)"
}

onMounted(() => {
  update_max_table_height();
  addEventListener("resize",update_max_table_height)
})
onUnmounted(() => {
  removeEventListener("resize",update_max_table_height)

})

const nextTickUpdate = () => {
  nextTick(update_max_table_height);
}


</script>
